<template name="settlementAre">
	<view class="display flow settlementAre bottom" :style="{'bottom': isShop?isIphoneX?'150rpx':'100rpx':''}"> 
		<view class="display flow settlementItem" @click="allCheck" >
			<uni-icons class="icon" :type="'checkbox-filled'" :color="themeColor" size="16" v-if="isAllCheck"/>
			<uni-icons class="icon" :type="'circle'" :color="'grey'" size="16" v-else/>
			<text style="margin-left: 15rpx;">全选</text>
		</view>
		<view class="display flow clearAre" v-if="isEditor" @click="emptyFailureBtn">
			<image src="/static/images/icon/clear.png"></image>
			<text>清理失效商品</text>
		</view>
		<view class="display flow settlementItem" v-else>
			<text>合计：</text>
			<text class="price">￥{{total}}</text>
		</view>
		<button class="display goPay themeBgColor" @click="funcBtnClick">{{funcBtn}}</button>
	</view>
</template>

<script>
	export default {
		name: "settlementAre",
		props: ['isAllCheck','isEditor','total','isShop'],
		data() {
			return {
				isIphoneX: this.global.isIphoneX,
				themeColor: this.global.themeColor
			};
		},
		computed:{
			funcBtn(){
				let text = this.isEditor?'删除商品':'去支付'
				return text
			}
		},
		methods:{
			allCheck(){
				this.$emit('allCheck')
			},
			funcBtnClick(){
				if(this.isEditor){
					this.$emit('deleteSelectBtn')
				}else{
					this.$emit('goBuy')
				}
			},
			emptyFailureBtn(){
				this.$emit('emptyFailureBtn')
			}
		}
	}
</script>

<style lang="scss">
	.settlementAre{
		@include widthHeight(100%,95rpx);
		@include font;
		@include backG;
		@include border(2rpx,$borderBg);
		@include padding(30rpx,'left');
		.settlementItem{
			@include width(auto);
			.price{
				@include margin(5rpx,'left');
			}
		}
		.clearAre{
			@include width(auto);
			image{
				@include widthHeight(28rpx,32rpx);
				@include margin(10rpx,'right');
			}
		}
		.goPay{
			@include widthHeight(240rpx,95rpx);
			@include flex-align-justify;
			@include borderR(0);
		}
	}
	
	
</style>
